<template>
  <div class="container-fluid">
    <div class="row discuss justify-content-center">
      <el-empty
        v-if="comments === 0"
        description="还没有人发表意见~"
        :image-size="200"
        :image="require(`bodyLeftDefaultImage`)"
      ></el-empty>

      <div
        v-else
        v-for="(item, position) in commentsList"
        :key="item.id"
        class="row border-bottom padding-20 no-gutters"
      >
        <div class="col-3 col-sm-2">
          <el-avatar :size="40" :src="getWriter(item.from).avatar"></el-avatar>
        </div>

        <div class="col-9 col-sm-10">
          <div class="row">
            <div class="col-12 padding-5">
              <nick
                id="writer"
                @touch="visitUser(getWriter(item.from).id)"
                :name="getWriter(item.from).nick"
                :showTag="
                  writerId === getWriter(item.from).id && writerId !== -1
                "
              >
              </nick>
            </div>

            <div class="col-12 padding-5">
              <span style="color: #9b9b9b">{{ position + 1 }} 楼 · </span>
              <span style="color: #9b9b9b">{{ item.time }}</span>
            </div>

            <div class="col-12 padding-5">
              <span>{{ item.content }} </span>
              <span class="icon" style="color: #41b883; cursor: pointer"
                ><i class="iconfont icon-dianzan"></i> {{ item.likes }}
              </span>

              <el-popover
                trigger="hover"
                placement="top"
                width="160"
                :value="showDiscuss === position"
              >
                <p>
                  <el-input
                    v-model.trim="replayContent"
                    :placeholder="' 回复 ' + getWriter(item.from).nick + ' :'"
                  ></el-input>
                </p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="
                      showDiscuss = '';
                      replayContent = '';
                    "
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="
                      addReplay(item.id, null);
                      showDiscuss = '';
                    "
                    >确定</el-button
                  >
                </div>
                <el-button
                  @click="showDiscuss = position"
                  type="text"
                  slot="reference"
                  ><span class="icon" style="color: #41b883; cursor: pointer"
                    ><i class="el-icon-chat-dot-round"></i> 回复
                  </span></el-button
                >
              </el-popover>
            </div>

            <div v-if="item.children.length !== 0" class="col-12">
              <div class="row discussChildren padding-5 round-xs">
                <div
                  v-for="(replay, index) in item.children"
                  :key="replay.id"
                  class="col-12"
                >
                  <div v-if="index <= 2" class="col-12 padding-5">
                    <nick
                      :showTag="
                        getWriter(replay.from).id === writerId &&
                        writerId !== -1
                      "
                      :name="getWriter(replay.from).nick"
                    ></nick>
                    <span v-if="replay.to !== null">
                      回复
                      <nick
                        :showTag="
                          writerId === getWriter(replay.to).id &&
                          writerId !== -1
                        "
                        :name="getWriter(replay.to).nick"
                      ></nick>
                    </span>
                    <span> : {{ replay.content }}</span>
                  </div>

                  <div v-if="index === 3" class="col-12 padding-5">
                    <span
                      @click="
                        expand = true;
                        discussIndex = item.children;
                        discussPosition = position;
                        commentId = item.id;
                      "
                      style="color: #41b883; cursor: pointer"
                      >查看全部 {{ item.children.length }} 条回复</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        v-if="comments !== 0"
        class="col-12 padding-20"
        style="text-align: center"
      >
        <span style="color: gray; font-size: 13px">只有这些了~</span>
      </div>

      <el-drawer
        :title="discussPosition + 1 + ` 楼的回复`"
        :visible.sync="expand"
        :direction="`btt`"
        :size="`95%`"
        @close="expand = false"
        show-close
      >
        <discuss-user-mode
          :commentId="commentId"
          :articleId="articleId"
          :writerId="writerId"
          :users="discussIndex"
        ></discuss-user-mode>
      </el-drawer>

      <div class="col-12 fixed-bottom sticky-top">
        <el-input v-model.trim="discussContent" placeholder="我也来说两句~">
          <el-button @click="addDiscuss()" type="text" slot="suffix"
            ><span style="color: #41b883; font-size: 14px"
              ><i class="el-icon-edit"></i>发表评论</span
            ></el-button
          >
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import DiscussUserMode from "./DiscussUserMode.vue";
import Nick from "./Nick.vue";
import { fake } from "../../assets/fake";
export default {
  data() {
    return {
      expand: false,
      discussIndex: [],
      discussPosition: -1,
      discussContent: "",
      replayContent: "",
      showDiscuss: "",
      commentId: "",
    };
  },
  props: {
    comments: {
      type: Number,
      default: 0,
    },
    commentsList: {
      type: Array,
      default: [],
    },
    writerId: {
      type: String,
    },
    articleId: {
      type: String,
    },
  },
  methods: {
    getWriter(writerId) {
      writerId = writerId + "";
      return fake.methods.getUserInfo(writerId);
    },
    addDiscuss() {
      if (fake.self === null) {
        this.$alert("登录后才能发表评论", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      } else {
        if (this.discussContent !== "") {
          fake.methods.addComment(
            fake.self.info.id,
            this.articleId,
            this.discussContent
          );
          this.$alert("评论成功", "提示", {
            confirmButtonText: "确定",
            type: "success",
          });
          this.discussContent = "";
        } else {
          this.$alert("不能评论空哦", "提示", {
            confirmButtonText: "确定",
            type: "warning",
          });
        }
      }
    },
    addReplay(commentId, to) {
      if (fake.self === null) {
        this.$alert("登录后才能回复", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      } else {
        if (this.replayContent !== "") {
          fake.methods.addReplay(
            fake.self.info.id,
            this.articleId,
            commentId,
            this.replayContent,
            to
          );
          this.$alert("回复成功", "提示", {
            confirmButtonText: "确定",
            type: "success",
          });
          this.replayContent = "";
        } else {
          this.$alert("不能回复空哦", "提示", {
            confirmButtonText: "确定",
            type: "warning",
          });
        }
      }
    },
    visitUser(id) {
      this.$router.push({
        name: "User",
        query: {
          id: id,
        },
      });
    },
  },
  components: {
    DiscussUserMode,
    Nick,
  },
  mounted() {},
};
</script>

<style scoped>
span {
  font-size: 12px;
  color: #9b9b9b;
}
p {
  padding: 8px 0;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.659);
}
.icon {
  font-size: 16px;
  color: #41b883;
  transition: all 0.3s;
}
.icon:hover {
  color: rgba(46, 215, 139, 0.753);
  cursor: pointer;
  transition: all 0.3s;
}
.discuss span {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.659);
}
.discussChildren {
  background-color: #eeeeee;
}
#writer {
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s;
}
#writer:hover {
  color: #41b883;
  transition: all 0.3s;
}
</style>